<template>
  <div class="user">
    <el-card style="min-width: 1200px">
      <el-form ref="userInAppForm" :model="commandForm" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户状态" prop="disabled">
              <el-select
                v-model="commandForm.disabled"
                style="width: 100%"
                placeholder="请选择用户状态"
              >
                <el-option label="所有" value=""></el-option>
                <el-option label="正常" :value="false"></el-option>
                <el-option label="已冻结" :value="true"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-form-item prop="userNo" label="用户ID">
              <el-input
                v-model="commandForm.userNo"
                placeholder="请输入用户ID/昵称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="2" style="min-width: 170px">
            <el-button class="width120" @click="resetForm('userInAppForm')"
              >重置</el-button
            >
            <el-button type="primary" class="width120" @click="()=>{
               this.dataForm=JSON.parse(JSON.stringify(this.commandForm));
               this.getDataList()
              }"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 15px; min-width: 1200px">
      <div class="switch">
        <el-switch v-model="isFixedTableH" inactive-text="固定表头">
        </el-switch>
      </div>
      <el-table :data="dataList" :height="fixedTableHeight">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userNo"
          align="center"
          label="用户ID"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.userNo ? scope.row.userNo : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userName"
          align="center"
          label="名称"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.userName ? scope.row.userName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="balance" align="center" label="可用余额/元">
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.balance?scope.row.balance:'0.00' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="withdrawableBalance" align="center" label="可提现金额/元">
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
            {{ scope.row.withdrawableBalance?scope.row.withdrawableBalance:'0.00' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="couponNum"
          align="center"
          label="优惠券数量"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.couponValidNum }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="disabled"
          align="center"
          label="用户状态"
        >
          <template slot-scope="scope">{{
            scope.row.disabled ? "已冻结" : "正常"
          }}</template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              @click="
                $router.push({ name: 'userInfo', query: { id: scope.row.id } })
              "
              type="text"
              >详情</el-button
            >
            <el-button
              @click="
                handleClick(scope.row)
              "
              type="text"
              >{{ scope.row.disabled ? "恢复" : "冻结" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
    <codeDialogVue
      codeId="5"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";

import mixin from "@/mixins/mixin";
export default {
  name: "userIndex",
  components: {
    codeDialogVue,
  },
  mixins: [mixin],
  data() {
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      mixinViewModuleOptions: {
        getDataListURL: "/api/merchant/memberuser/searchByPage",
        createdIsNeed:false,
      },
      commandForm: {
        memberClass: 3,
        disabled: "",
        userNo: "",
      },
    };
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if(this.$route.name==this.$options.name){
          this.getDataList();
        }
      },
    },
    deep: true,
  },
  created(){
    this.dataForm=JSON.parse(JSON.stringify(this.commandForm))
    this.getDataList()
  },
  methods: {
    codeStateFn(val) {
      if (val) {
        this.handleClick(this.codeItem);
      }
    },
    goCode(val, item) {
      this.codeType = val;
      this.codeItem = item;
      this.codeDialog = true;
    },
    handleClick(row) {
      this.$http
        .get("/api/merchant/memberuser/freeze", {
          params: {
            id: row.id,
            disabled: row.disabled ? false : true,
          },
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success(row.disabled ? "恢复成功！" : "冻结成功！");
            this.query();
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.user {
  .el-form-item {
    margin-bottom: 0;
  }
}
.switch {
  margin-bottom: 20px;
}
</style>
